To make Google maps API to Draw a line From One Place to Another Direction.
Step1: Add the below Google maps API link to your page
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Step 2: Add the below HTML Div to body
<div style="width: 600px;">
<div id="map" style="width: 800px; height: 600px; float: left;"></div>
</div>
Step 3: Then you have to configure Javascript code based on your Requirement.
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var request = {
origin: '13.315616, 75.774851',
destination: '12.971606, 77.592682',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
Arjun is a Full-stack developer, who is fond of the web. Lives in Chikmagalur, Karnataka, India